#{extends 'main.html' /}

<!--script>
//$(document).ready(function(){  
//      $('li.tarjetas').hover(function(event){  
//         $('body').css('background', '#ad472a'); 
//      }); 
//});     
<!--/script-->

<div id="wrapping">
    <a href="" title="Visitame!" id="btn-wrap">
        <span class="title">MATERIAL DIDACTICO</span>
        <div id="info">
            <p>        
                <span><strong>www.difchihuahua.gob.mx</strong></span>
            </p>
        </div>
    </a>		
</div>

<div class="contenedor">   
    <ul class="menu">
        #{paginate.list items:categorias, as:'categoria'} 
            <li class="tarjetas">
                <a href="#"><img src =${categoria.rutaImg} class="imagen" ></a>
                <p class="descripcion"> ${categoria?.descripcion} </p>
                <p class="link-enlace">Enlaces:  <strong class="num-Enlace">${categoria?.enlaces?.size()}</strong></p> 
                <div class="btn-bottom">
                    <a href="@{Home.show(categoria.id)}" class="btn btn-success btn-block link">${categoria?.nombre}</a>
                </div>
            </li> 
        #{/paginate.list}
    </ul>
</div>

<div class="paginacion">#{paginate.controls items:categorias /}</div>



    

